
<!--
* description: 维修收款维护
* author:陈靖文
* createdDate:2021-2-26
-->
<template>
  <section class="editBigAreaInfo" style="background: #ffff; height: 100%">
    <div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="费用信息" name="first">
          <!-- 客户费用信息 -->
          <QueryComponent
            ref="q1-1"
            :dynamic-inputs="formInputs1"
            title="客户费用信息"
            :form-field="formField_one"
            width="98%"
          >
            <template v-slot:other>
              <el-button
                v-if="isShow"
                style="float: right"
                type="primary"
                class="iconfont icon-applicationForm"
                @click="receivePayment"
              >收款</el-button>
            </template>
          </QueryComponent>
          <!-- 其他费用信息 -->
          <QueryComponent
            ref="q1-2"
            :dynamic-inputs="formInputs2"
            title="其他费用信息"
            :is-show-pagination="false"
            :is-show-select="false"
            :form-field="formField_two"
          />

          <!-- 结算信息 -->
          <QueryComponent
            ref="q1-3"
            :dynamic-tables="dynamicTables"
            :table-height="410"
            width="98%"
            title="收款信息"
          />
          <el-dialog
            v-dialogDrag
            :visible="showCodediv"
            center
            width="30%"
            :append-to-body="true"
            :close-on-click-modal="false"
            @close="closeCode"
          >
            <dialogHeader
              slot="title"
              title="收款信息"
              :style-type="$store.state.app.dialogType"
            />
            <div style="margin: 0 auto; width: 200px">
              <div id="qrcode" ref="qrcode" style="margin-bottom:40px" />
            </div>
          </el-dialog>
          <el-button
            style="float: left; margin-left: 25px"
            type="primary"
            class="iconfont icon-applicationForm"
            @click="showPoscode"
          >POS机收款</el-button>
        </el-tab-pane>

        <el-tab-pane label="客户车辆信息" name="second">
          <!-- 车辆信息 -->
          <QueryComponent
            :dynamic-inputs="formInputs_1"
            title="车辆信息"
            :form-field="formField_custCarInfo"
          />
        </el-tab-pane>
        <el-tab-pane label="维修信息" name="three">
          <div class="filter-container filter-title">维修信息</div>

          <!-- 维修信息 表格一 -->
          <div class="mainten-table__line">
            <span class="mainten-table__line-info">维修项目</span>
          </div>
          <OneTableTemplate
            ref="table_3_1"
            :dynamic-table-cols="tableHeader_3_1"
            :is-show-pagination="false"
            :dynamic-table-defult-height="300"
            :dynamic-is-show-select="false"
          />
          <!-- 维修信息 表格二 -->
          <div class="mainten-table__line">
            <span class="mainten-table__line-info">维修备件</span>
          </div>
          <OneTableTemplate
            ref="table_3_2"
            :dynamic-table-cols="tableHeader_3_2"
            :is-show-pagination="false"
            :dynamic-table-defult-height="300"
            :dynamic-is-show-select="false"
          />
          <!-- 维修信息 表格三 -->
          <div class="mainten-table__line">
            <span class="mainten-table__line-info">其他项目</span>
          </div>

          <OneTableTemplate
            ref="table_3_3"
            :dynamic-table-cols="tableHeader_3_3"
            :is-show-pagination="false"
            :dynamic-table-defult-height="300"
            :dynamic-is-show-select="false"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
  </section>
</template>
<script>
import { formMixins } from '@/components/mixins/formMixins'
import OneTableTemplate from '@/components/templates/oneTable'
import fetchData from '@/views/se/maintenanceManagement/maintenanceSettlement/fetchData'
import QueryComponent from '@/components/QueryComponent/QueryComponent'
import api from './api'
import QRCode from 'qrcodejs2'

export default {
  name: 'Maincollectiondetil',
  components: {
    OneTableTemplate,
    QueryComponent,
    dialogHeader: () => import('@/components/dialogHeader')
  },

  // 组件混入对象
  mixins: [formMixins],

  props: {
    popupsVisible: { type: Boolean, default: false },
    // 从网格传入的编辑行数据(json)
    dynamicEditRowData: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },

  data() {
    return {
      showCodediv: false,

      // 二维码的字段
      getBody: {},

      formField_custCarInfo: {},
      isShow: true,
      dynamicTables: [
        {
          prop: 'payModeName',
          label: '账类',
          align: 'center'
        },
        {
          prop: 'brandCode',
          label: '应收单位名称',
          align: 'center'
        },
        {
          prop: 'paymentName',
          label: '付款方式',
          align: 'center'
        },
        {
          prop: 'dueAmount',
          label: '应收费用',
          align: 'center'
        },
        {
          prop: 'realAmount',
          label: '实收费用',
          align: 'center',
          isComponent: true,
          comps: [
            {
              compKey: 'realAmount',
              codeField: 'realAmount',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              rowFileds:
                'disabled:paymentName-索赔|disabled:paymentName-内部|disabled:paymentName-转账|disabled:paymentName-商城|disabled:paymentName-APP|disabled:paymentName-POS',
              isShowLabel: false,
              isInput: true,
              isRequire: true,
              validrule: { isformat: /^\d+(.\d{1,2})?$/, noRequire: false }
            }
          ]
        },
        {
          prop: 'remark',
          label: '备注',
          align: 'center',
          isComponent: true,
          comps: [
            {
              compKey: 'remark',
              codeField: 'remark',
              component: () => import('@/components/org/commonInput'),
              rowFileds: ' ', // 网格中组件必须传
              isShowLabel: false,
              isInput: true
            }
          ]
        }
      ],

      titleName: '维修结算申请',
      // 动态组件-按钮
      //  tableButtons: [

      //      {
      //     compKey: 'btnKey1',
      //     size: 'small',
      //     name: 'confirm',
      //     clickEvent: this.add,
      //     text: 'POS机收款',
      //     position: 'bottom',
      //     disabled: true
      //   },

      // ],

      // 动态组件-查询条件
      formField_one: {
        wiDueAmount: '',
        partDueFee: '',
        sumOtherDueAmount: '',
        repairDueAmount: '',
        wiDiscountRate: '',
        wiRealAmount: '',
        partDiscountRate: '',
        partRealFee: '',
        produceDate: '',
        repairRealAmount: '',
        remark: '',
        realAmount: ''
      },
      formField_two: {
        claimDemage: '',
        inside: '',
        insurance: ''
      },
      formInputs1: [
        {
          compKey: 'compKey1',
          labelName: '工时费：',
          class: 'yuan',
          codeField: 'wiDueAmount',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          disabled: true,
          isMust: true
        },
        {
          compKey: 'compKey2',
          labelName: '备件费：',
          class: 'yuan',
          codeField: 'partDueFee',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          disabled: true,
          isMust: true
        },
        {
          compKey: 'compKey3',
          class: 'yuan',
          labelName: '其他费：',
          codeField: 'sumOtherDueAmount',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          disabled: true,
          isMust: true
        },
        {
          compKey: 'compKey4',
          labelName: '费用合计：',
          class: 'yuan',
          codeField: 'repairDueAmount',
          component: () => import('@/components/org/commonInput'),
          type: 'dropdownList',
          disabled: true,
          isMust: true
        },
        {
          compKey: 'compKey5',
          class: 'percent',
          labelName: '工时折扣：',
          disabled: true,
          codeField: 'wiDiscountRate',
          component: () => import('@/components/org/commonInput'),
          type: 'dropdownList',

          isMust: true
        },
        {
          compKey: 'compKey6',
          labelName: '应收工时：',
          class: 'yuan',
          codeField: 'wiRealAmount',
          disabled: true,
          component: () => import('@/components/org/commonInput'),
          type: 'dropdownList',

          isMust: true
        },
        {
          class: 'percent',
          compKey: 'compKey7',
          labelName: '备件折扣：',
          codeField: 'partDiscountRate',
          disabled: true,
          component: () => import('@/components/org/commonInput'),
          type: 'dropdownList',

          isMust: true
        },
        {
          compKey: 'compKey8',
          labelName: '应收备件：',
          codeField: 'partRealFee',
          class: 'yuan',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          disabled: true,
          isMust: true
        },
        {
          compKey: 'compKey9',
          labelName: '折前总额：',
          codeField: 'repairDueAmount',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          class: 'yuan',
          disabled: true,
          isMust: true
        },
        {
          compKey: 'compKey10',
          labelName: '折后总额：',
          codeField: 'repairRealAmount',
          class: 'yuan',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          disabled: true,
          isMust: true
        },
        {
          compKey: 'compKey11',
          labelName: '备注：',
          codeField: 'remark',
          component: () => import('@/components/org/commonInput'),
          type: 'dropdownList',
          disabled: true,
          isMust: true,
          span: 12
        }
      ],
      // 动态组件-查询条件
      formInputs2: [
        {
          compKey: 'compKey1',
          labelName: '索赔：',
          codeField: 'claimDemage',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          class: 'yuan',
          disabled: true,
          isMust: true
        },
        {
          compKey: 'compKey2',
          class: 'yuan',
          labelName: '内部：',
          codeField: 'inside',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          disabled: true,
          isMust: true
        },
        {
          compKey: 'insurance',
          class: 'yuan',
          labelName: '保险：',
          codeField: 'insurance',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          disabled: true,
          isMust: true
        }
      ],
      formInputs_1: [
        {
          compKey: 'key0',
          labelName: '车牌号：',
          codeField: 'carLicense',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key1',
          labelName: 'VIN码：',
          codeField: 'vin',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key2',
          labelName: '品牌：',
          codeField: 'carBrandCn',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key3',
          labelName: '车系：',
          codeField: 'carSeriesCn',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key4',
          labelName: '车型编码：',
          codeField: 'carConfigCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key5',
          labelName: '车型名称：',
          codeField: 'carConfigCn',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key6',
          labelName: '颜色：',
          codeField: 'carColorName',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key7',
          labelName: '车辆用途：',
          codeField: 'buyCaruseName',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key8',
          labelName: '行驶里程：',
          codeField: 'mileage',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key9',
          labelName: '购车日期：',
          codeField: 'buyDate',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          isMul: false,
          disabled: true
        },
        {
          compKey: 'key10',
          labelName: '交车日期：',
          codeField: 'deliveryDate',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        }
      ],

      formInputs_2: [
        {
          compKey: 'key0',
          labelName: '派工单号：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key1',
          labelName: '服务顾问：',
          codeField: 'saleOrderCode',
          lookuptype: 'VE0185',
          component: () => import('@/components/org/LookupValue'),
          type: 'dropdownList',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key2',
          labelName: '送修人：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key3',
          labelName: '送修人电话：',
          codeField: 'isAssign',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key4',
          labelName: '到店时间：',
          codeField: 'isAssign',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key5',
          labelName: '预计交车时间：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key7',
          labelName: '行驶里程：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key6',
          labelName: '工单状态：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        }
      ],
      formCheckboxs: [
        {
          key: 'key0',
          text: '洗车',
          model: ''
        },
        {
          key: 'key1',
          text: '在店等待',
          model: ''
        },
        {
          key: 'key2',
          text: '救援',
          model: ''
        },
        {
          key: 'key3',
          text: '库存车',
          model: ''
        }
      ],
      textareaInputs: [
        {
          compKey: 'key0',
          codeField: 'isAssign',
          isMul: false,
          component: () => import('@/components/org/commonInput/textareaInput'),
          type: 'inputText',
          isMust: true,
          span: 8
        },
        {
          compKey: 'key1',
          codeField: 'isAssign',
          isMul: false,
          component: () => import('@/components/org/commonInput/textareaInput'),
          type: 'inputText',
          isMust: true,
          span: 8
        },
        {
          compKey: 'key2',
          codeField: 'isAssign',
          isMul: false,
          component: () => import('@/components/org/commonInput/textareaInput'),
          type: 'inputText',
          isMust: true,
          span: 8
        }
      ],

      activeName: 'first',

      formInputs_3: [
        {
          compKey: 'key0',
          labelName: '用户ID：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key1',
          labelName: '车主姓名：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key2',
          labelName: '车主电话：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key3',
          labelName: '车主性质：',
          codeField: 'isAssign',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key4',
          labelName: '证件号码：',
          codeField: 'isAssign',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key5',
          labelName: '省份：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key6',
          labelName: '城市：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key7',
          labelName: '区县：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key8',
          labelName: '详细地址：',
          codeField: 'isAssign',
          isMul: false,
          component: () => import('@/components/org/commonInput/textareaInput'),
          type: 'inputText',
          isMust: true,
          span: 18,
          disabled: true
        }
      ],

      formField: {},

      tableHeader_1: [
        {
          label: '活动编号',
          prop: ''
        },
        {
          label: '活动名称',
          prop: ''
        },
        {
          label: '活动类型',
          prop: ''
        },
        {
          label: '开始日期',
          prop: ''
        },
        {
          label: '结束日期',
          prop: ''
        }
      ],
      tableHeader_2: [
        {
          label: '订单号',
          prop: ''
        },
        {
          label: '类别',
          prop: ''
        },
        {
          label: '保养套餐/精品编码',
          prop: ''
        },
        {
          label: '保养套餐/精品名称',
          prop: ''
        },
        {
          label: '使用次数/数量',
          prop: ''
        },
        {
          label: '有效日期',
          prop: ''
        },
        {
          label: '购车日期',
          prop: ''
        }
      ],
      // 维修项目
      tableHeader_3_1: [
        {
          label: '工时编码',
          prop: 'wiCode'
        },
        {
          label: '维修内容',
          prop: 'wiName'
        },
        {
          label: '付费性质',
          prop: 'payKindName'
        },
        {
          label: '工时数',
          prop: 'saleWorkQty'
        },
        {
          label: '工时单价',
          prop: 'wiPrice'
        },
        {
          label: '费用合计',
          prop: 'wiAmount'
        },
        {
          label: '维修类型',
          prop: 'repairTypeName'
        },
        {
          label: '费用预估',
          prop: 'wiPreAmount'
        },
        {
          label: '套餐/精品编码',
          prop: 'comboSaleCode'
        },
        {
          label: '是否委外',
          prop: 'isEntrust'
        },
        {
          label: '备注',
          prop: 'note'
        }
      ],
      // 维修备件
      tableHeader_3_2: [
        {
          label: '备件编码',
          prop: 'partNo'
        },
        {
          label: '备件名称',
          prop: 'partName'
        },
        {
          label: '付费性质',
          prop: 'payKindName'
        },
        {
          label: '数量',
          prop: 'partQty'
        },
        {
          label: '单价',
          prop: 'partPrice'
        },
        {
          label: '费用合计',
          prop: 'partAmount'
        },
        {
          label: '维修类型',
          prop: 'repairTypeName'
        },
        {
          label: '维修类别',
          prop: 'retRepairTypeName'
        },
        {
          label: '费用预估',
          prop: 'prePartAmount'
        },
        {
          label: '套餐/精品编码',
          prop: 'comboSaleCode'
        },
        {
          label: '是否委外',
          prop: 'isAssign'
        },
        {
          label: '备注',
          prop: 'note'
        }
      ],
      // 其他项目
      tableHeader_3_3: [
        {
          label: '其他项目',
          prop: 'otherAmountType'
        },
        {
          label: '付费性质',
          prop: 'payKindName'
        },
        {
          label: '费用',
          prop: 'otherAmount'
        },
        {
          label: '套餐/精品编码',
          prop: 'servicePackageCode'
        },
        {
          label: '备注',
          prop: 'remark'
        }
      ],
      formInputs_4: [
        {
          compKey: 'key0',
          labelName: '索赔：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key1',
          labelName: '内部：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key2',
          labelName: '保险：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key3',
          labelName: '客户：',
          codeField: 'isAssign',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key4',
          labelName: '工时费：',
          codeField: 'isAssign',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key5',
          labelName: '备件费：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key6',
          labelName: '其他费用：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key7',
          labelName: '费用合计：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        }
      ],

      formField2: {},
      row: {}
    }
  },
  computed: {
    formFieldNew() {
      return this.$utils.deepCopy(this.formField_one)
    }
  },
  watch: {
    '$route.params': function(val) {
      if (Object.prototype.hasOwnProperty.call(val, 'row')) {
        this.row = val['row']

        // 客户费用信息赋值
        this.loadFields()
        // 加载收款信息数据
        this.loadData()
        fetchData.getTabData.call(this)
      }
    },
    formFieldNew: {
      handler(newval, oldval) {
        const that = this
        // 工时未打折费用
        const wiP = Number(newval['wiDueAmount'])
        // 备件未打折费用
        const partP = Number(newval['partDueFee'])
        // 折后工时费用
        const wiA = Number(newval['wiRealAmount'])
        // 折后备件费用
        const partA = Number(newval['partRealFee'])
        this.$nextTick(() => {
          // 工时
          if (this.$route.params.row.wiRate === null) {
            if (wiP !== 0 || wiA !== 0) {
              that.formField_one['wiDiscountRate'] = ((wiA / wiP) * 100).toFixed(
                2
              )
            } else if (wiP === 0) {
              that.formField_one['wiDiscountRate'] = 100
            } else {
              that.formField_one['wiDiscountRate'] = 0
            }
          } else {
            this.formField_one['wiDiscountRate'] = this.$route.params.row.wiRate
          }
          // 备件
          if (this.$route.params.row.partRate === null) {
            if (partP !== 0 || partA !== 0) {
              that.formField_one['partDiscountRate'] = (
                (partA / partP) *
                100
              ).toFixed(2)
            } else if (partP === 0) {
              that.formField_one['partDiscountRate'] = 100
            } else {
              that.formField_one['partDiscountRate'] = 0
            }
          } else {
            this.formField_one['partDiscountRate'] = this.$route.params.row.partRate
          }
        })
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.formField_custCarInfo = this.getFormField(this.formInputs_1)
  },
  mounted() {
    this.getList(this.$route.params)
  },
  methods: {
    getList(val) {
      if (Object.prototype.hasOwnProperty.call(val, 'row')) {
        this.row = val['row']
        // 客户费用信息赋值
        this.loadFields()
        // 加载收款信息数据
        this.loadData()
        fetchData.getTabData.call(this)
      }
    },
    // 生成formField
    genUtil:
      (array) =>
        (attr1 = 'codeField', attr2 = 'textField') =>
          array.reduce((p, c) => {
            p[c[attr1]] = ''
            // eslint-disable-next-line no-prototype-builtins
            c.hasOwnProperty(attr2) ? (p[c[attr2]] = '') : ''
            return p
          }, {}),
    getFormField(tableComponents) {
      return this.genUtil(tableComponents)()
    },
    loadFields() {
      for (const attr in this.formField_one) {
        this.formField_one[attr] = this.row[attr]
      }
    },
    loadData() {
      if (this.$route.params.row.repairOrderStatus === '50') {
        this.isShow = false
      }
      const { repairOrderCode, repairOrderId, custName } = this.row
      // 加载数据请求
      const loading = this.$loading({ text: `正在加载数据,请稍等...` })
      this.$requestAPI({
        apiUrl: api.queryGatheringUsingPOST.APIUrl,
        variables: { repairOrderId, repairOrderCode, custName }
      })
        .then((res) => {
          if (res.result === '1') {
            const otherData = res['rows'][0]['other'][0]
            // 其它费用赋值
            for (const attr in this.formField_two) {
              this.formField_two[attr] = otherData[attr]
            }
            this.$refs['q1-3'].$refs['multipleTable'].list =
              res['rows'][0]['settlement']

            this.getBody = res['rows'][0].body[0]
          } else {
            this.$message(res.msg ? res.msg : '')
          }
        })
        .catch((err) => {
          if (err.response.data.msg) {
            this.$message(err.response.data.msg)
          } else {
            this.$message(err.message)
          }
        })
        .finally(() => {
          loading.close()
        })
    },
    // shoukuan 收款
    receivePayment() {
      const pageItem = this.$refs['q1-3']
      this.$utils.validataMoth(pageItem, 'validpage', '', '', '1')
      if (!pageItem.valid) {
        return false
      }
      fetchData.receivePayment.call(this)
    },

    // pos机收款--显示二维码
    showPoscode() {
      var {
        orderCode,
        amount,
        custName,
        saleContractCode,
        module,
        carConfigCN
      } = this.getBody

      var codeData = `{
         "body":
              [
                {
                  "orderCode": "${orderCode}",
                  "amount": "${amount}",                 
                  "custName":"${custName}",                  
                  "saleContractCode":"${saleContractCode}",
                  "module":"${module}",
                  "carConfigCN":"${carConfigCN}"
                }
              ]
        }
      
      `
      this.showCodediv = true
      this.$nextTick(function() {
        this.$refs.qrcode.innerHTML = ''
        this.qrcode(200, 200, codeData, 'canvas')
      })
    },
    // 关闭二维码
    closeCode() {
      this.showCodediv = false
    },
    qrcode(qWidth, qHeight, qText, qRender) {
      const qrcode = new QRCode('qrcode', {
        width: qWidth,
        height: qHeight,
        text: qText,
        render: qRender
      })
    },

    closeEdit() {
      this.$emit('close')
    },

    handleClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style lang="scss" scoped>
.btns-container {
  width: 100%;
  height: 30px;
  padding: 0 20px;
  background-color: #fff;
  .el-button {
    float: right;
  }
}
.checkbox-wrapper {
  width: 100%;
  padding: 0 10px;
  background-color: #fff;
  .el-checkbox {
    float: right;
    margin-top: 10px;
    margin-right: 10px;
  }
}
.textarea-header {
  width: 100%;
  height: 30px;
  background-color: #fff;
  &__item {
    width: calc(100% / 3);
    float: left;
  }
}
.mainten-select {
  width: 100%;
  height: 30px;
  padding: 0 20px;
  background-color: #fff;
}
.mainten-table__line {
  width: 100%;
  height: 30px;
  padding: 0 20px;
  line-height: 30px;
  background-color: #fff;
  &-info {
    float: left;
  }
  &-btns {
    float: right;
  }
}
/deep/.percent .el-input.el-input--small.el-input--suffix::after {
  content: "%";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
}
/deep/.yuan .el-input.el-input--small.el-input--suffix::after {
  content: "元";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
}
</style>
